<template>
	<div>
		<head-top></head-top>
		<div class="boxWrap">	
			<div class="analysis_results col-sm-12">				
				<!--显示保存成功-->
				<div class="alert alert-success text-center" v-if="saveSuccess" style="background-color: #dff0d8;">
					<a href="#" class="close" data-dismiss="alert">&times;</a>
					<strong>保存成功！</strong>
				</div>
				<div class="alert alert-danger text-center" v-if="saveError" style="background-color: #f2dede;">
					<a href="#" class="close" data-dismiss="alert">&times;</a>
					<strong>保存失败！</strong>
				</div>
			</div>
			<div class="analysis_results">
				<div class="col-sm-12 create_header text-left">
					<img src="../../assets/img/smart_header_img.svg" alt="img"/>
					<h5>智能建模报告</h5>											
				</div>
			</div>
		</div>	
		<div class="col-sm-12 text-left smart_header_des">
			<p class="analysis_results text-center">					
				智能建模报告包含最优模型的推荐，建模任务的基本运行情况描述以及模型的评价分数。你可以在此处选择保存自己感兴趣的模型以用于后期的预测。
			</p>
		</div>
		<div class="boxWrap">			
			<div class="analysis_results">
				<div class="col-sm-12"  style="margin:20px 0;padding:0;">
					<p class="analysis_details_left_name col-sm-1"  style="padding:0;margin-top:6px;">推荐模型</p>	
					<div style="border:1px solid #ddd;padding-left:6px;height:40px;line-height:40px;" class="col-sm-11">						
						<p class="col-sm-4 spe_part_color" v-for="rec_model in recommend_models">{{rec_model}}</p>
					</div>
				</div>
				<p class="analysis_details_left_name col-sm-12">运行信息</p>				
				<table class="table table-striped table-hover table-bordered text-left detail_table">
	                <thead>
	                    <tr class="analysis_details_name" id="th_have_no_border">
	                        <th>建模类型</th>
	                        <th>测试模型数</th>
	                        <th>成功</th>
	                        <th>失败</th>
	                        <th>运行时间</th>
	                    </tr>
	                </thead>
	                <tbody>
			            <tr class="spe_part_color">
			            	<td v-if="type==1">分类</td>
			            	<td v-else-if="type==2">聚类</td>
			            	<td v-else-if="type==3">回归</td>
			            	<td>{{amount}}</td>
			            	<td>{{success_amount}}</td>
			            	<td>{{failed_amount}}</td>
			            	<td>{{run_time}}s</td>
			            </tr>
	                </tbody>
	            </table>
				<p class="analysis_details_left_name">模型评分详情</p>				
				<table class="table table-striped table-hover table-bordered text-left" id="detail_table" style="position:relative;">
	                <thead>
	                    <tr class="analysis_details_name">
	                        <th v-for="(score_head,index) in score_headers" v-if="score_head.column_description==''">
	                        	{{score_head.display_name}}	                        	
	                        </th>
	                        <th v-else>
						    	{{score_head.display_name}}	 
						    	<img src="../../assets/img/bubble.svg" alt="bubble" class="bubble" @click="showDes(index,$event)" />
						    	<!--获取描述信息-->
						    	<p class="model_score_des col-sm-10" v-if="pIndex==index" :title="score_head.column_description">{{score_head.column_description}}</p>
						    </th>	                  
	                        <th>操作</th>
	                    </tr>
	                </thead>
	                <tbody id="editable_sample_tbody">
			            <tr v-for="score_detail in score_details" class="analysis_table">			            	
			            	<td v-for="score_val in score_detail">{{score_val}}</td>
                			<td>
                				<button class="btn preservation" @click="showSaveBomb(score_detail[0],score_detail[1])">保存</button>
                			</td>
			            </tr>
	                </tbody>
	            </table>
			</div>
		</div>
		<footerHtml></footerHtml>	
		<!--保存模型-->	
		<div id="mask" v-if="seen"></div> <!--遮罩层-->	
		<!--点击编辑保存模型的弹框-->
		<div class="bomb_box edit_box" v-show="saveModelBomb">	
			<p class="data_info_tip" v-if="saveModelTip">请填写完整名称或描述</p>
			<p class="text-left">
				<span class="report_info_name">模型名称</span>
				<input type="text" class="report_info_name_val"  style="margin-left:-6px;" v-model="save_model_name"/>
			</p>
			<p class="text-left">
				<span class="report_info_name" style="display: block; float: left;">模型描述</span>
				<textarea name="des" class="data_info_des_val" v-model="save_model_des"></textarea>
			</p>
			<p  class="text-right" style="margin-top:40px;">
				<button class="btn data_info_cancel" @click="bombBoxHide()">取消</button>
				<button class="btn data_edit_sure" @click="preservationModel(save_model_id)" style="margin-left:40px;">确定保存</button>
			</p>			
		</div>
	</div>	
</template>


<script>
	//引入公共模块
	import headTop from '@/components/headTop'
	import footerHtml from '@/components/footerHtml'
	//api	
	import {urlGetSAnalyzation,urlPreservation} from '../../api/api'

export default {
    name: 'analysisResults',   
    data(){
    	return { 
    		scoreTip:false,
    		saveSuccess:false,
    		saveError:false,
    		saveModelBomb:false,
    		seen:false,
    		saveModelTip:false,
    		save_model_id:'',
    		save_model_name:'',
			save_model_des:'',
    		type:'',
    		amount:'',
			success_amount:'',
			failed_amount :'',
  		  	run_time:'',
  		  	recommend_models:'',
  		  	score_headers:'',
  		  	score_details:'', 
  		  	model_list:'',
  		  	pIndex:-1
    	}
    },
    components:{
    	headTop,
    	footerHtml
    },   
    mounted(){
    	let sendData={
	  		id:this.$route.params.id
		};
		urlGetSAnalyzation(sendData).then(response => {
 			if(response.data.code==200){
				this.type =response.data.data.type ;
				this.amount =response.data.data.amount ;
				this.success_amount =response.data.data.success_amount ;
				this.failed_amount =response.data.data.failed_amount ;
				this.run_time =response.data.data.run_time ;
				this.score_headers=response.data.data.score_headers;
				this.score_details=response.data.data.score_details;
				this.model_list=response.data.data.model_list;
				this.recommend_models=response.data.data.recommend_models;
 			}else if(response.data.code==201){    				
 				console.log('服务器返回数据失败')
 			}		
    	}).catch(error => {
			if(error.response.data.code==401){
        		localStorage.clear();
        		this.$router.replace('/login');
			}
        });
    },
    methods: {
    	bombBoxHide(){
    		this.seen=false;
    		this.saveModelBomb=false;
    	},
    	showSaveBomb(id,name){
    		this.save_model_id=id;
    		this.save_model_name=name;
    		this.seen=true;
    		this.saveModelBomb=true;
    	},
		preservationModel(id){
			if(this.save_model_name=='' || this.save_model_des==''){
				this.saveModelTip=true;
				return false;
			}else{
				this.saveModelTip=false;
				let sendData={
			  		job_id:this.$route.params.id,
			  		model_id:id,
			  		model_name:this.save_model_name,
	    			model_desc:this.save_model_des
				};
				urlPreservation(sendData).then(response => {
		 			if(response.data.code==200){
		 				this.seen=false;
		 				this.saveModelBomb=false;
						this.saveSuccess=true;					
		 			}else if(response.data.code==201){    				
		 				this.saveError=true;
		 				this.seen=false;
		 				this.saveModelBomb=false;
		 			}		
		     	}).catch(error => {
		     		if(error.response.data.code==401){	
		     			localStorage.clear();
		        		this.$router.replace('/login');
					}
		      	});
			}
			
		},
		showDes(index,e){
			$('.model_score_des').show();
			e.stopPropagation();//阻止事件冒泡
			this.pIndex=index;
		},		
  	},
	created() {
		//点击body描述信息消失
	    let body = document.querySelector('body')
	    body.addEventListener('click',(e)=>{         
	    	$('.model_score_des').hide();        
	    },false)
    },

}
</script>


<style lang="css">
	@import "../../assets/css/base.css"
</style>
<style lang="css">
	@import "../../assets/css/analysis_results.css"
</style>

